<template>
  <div class="mb-4">
    <el-row>
      <el-col :span="6">
        <research4 @output="onput" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain @click="onClick">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
    </el-row>
  </div>
  <br />
  <el-col> <el-button  type="danger":icon="Delete" @click="deleteUser">删      除</el-button></el-col>

  <br />
  <el-table :data="tableData" border style="width: 100%" @selection-change="selectDeleteUser">

    <el-table-column type="selection" width="55" />
    <el-table-column prop="playerName" label="球员名称" width="100" />
    <el-table-column prop="playerAccount" label="球员账户" width="100" />
    <el-table-column prop="playerScores" label="球员分数" width="100" />
    <el-table-column prop="role1" label="球员位置1" width="100" />
    <el-table-column prop="role2" label="球员位置2" width="100" />
    <el-table-column prop="description" label="个性签名" />
    <el-table-column prop="number" label="球衣号" width="80" />
    <el-table-column prop="team" label="球队" width="80" />
  </el-table>
</template>

<script lang="ts">
import research4 from './research4.vue';
export default {
  components: {
    research4
  }
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const input = ref(0);
const tableData = ref([]);
const selectedRows = ref([]);

const onput = (e) => {
  console.log(e);
  input.value = e;
}

const onClick = () => {
  try {
    axios.get('http://localhost:9001/PlayerCard/searchPlayerCard', {
      params: { info: input.value }
    }).then(response => {
      console.log(input);
      tableData.value = response.data;
    });
  } catch (error) {
    console.error('连接失败：', error.message);
  }
}

const reSet = () => {
  //input.value = "";
  try {
    axios.get('http://localhost:9001/PlayerCard/getAllPlayerCard', {
      params: { info: input.value }
    }).then(response => {
      console.log(input);
      tableData.value = response.data;
    });
  } catch (error) {
    console.error('连接失败：', error.message);
  }
}


import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:9001/PlayerCard/getAllPlayerCard');
    tableData.value = response.data;
  } catch (error) {
    console.error('连接失败：', error.message);
  }
});

const selectDeleteUser=(select) => {
  console.log(select);
  selectedRows.value=select;
}
function deleteUser(){
  console.log(selectedRows.value);
  axios.post('http://localhost:9001/PlayerCard/deletePlayerCard',selectedRows.value).then(response => {
    alert("删除成功!")
  })
}

</script>
